<!-- 动画实践1 -->











<script setup>
import * as THREE from "three";
// 导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  10000 // 远平面
);
camera.position.z = 80;
camera.position.y = 80;

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 将网格添加至场景中
scene.add(cube);


const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;// 设置阻尼系数
controls.dampingFactor = 0.05;

// 添加 环境光

const light = new THREE.AmbientLight(0xffffff, 2)


scene.add(light)


let mixer = null
let actions = null
// // 实例化加载器gltf
const gltfLoader = new GLTFLoader();

// 加载模型
gltfLoader.load(
  // 模型路径
  "./textures/dddd.glb",
  // 加载完成回调
  (gltf) => {
    scene.add(gltf.scene);
    let sc = gltf.animations[0]
    mixer = new THREE.AnimationMixer(gltf.scene)
    actions = mixer.clipAction(sc)

  }
);


  function handleStart() {
    actions.play()
  }


  function handleStop() {
    if (actions) {
      mixer.stopAllAction()

    }
  }

let clock = new THREE.Clock()

// 渲染循环
function animate() {
  let time = clock.getDelta()
  // Update mixer
  if (mixer) {
    mixer.update(time);
  }
  requestAnimationFrame(animate);
  controls.update()
  renderer.render(scene, camera);
}

animate();

</script>

<template>


  <button @click="handleStart"> 动画执行</button>

  <button @click="handleStop"> 动画停止</button>

</template>
